<template>
  <div class="searchBox">
    <div class="searchItem">
      <span>订单号:</span>
      <a-input v-model="queryParam.order_no" placeholder="请输入订单号"></a-input>
    </div>
    <div class="searchItem">
      <span>商品名称:</span>
      <a-input v-model="queryParam.goods_name" placeholder="请输入商品名称"></a-input>
    </div>
    <div class="searchItem">
      <span>手机号:</span>
      <a-input v-model="queryParam.mobile" placeholder="请输入手机号"></a-input>
    </div>
    <div class="searchItem">
      <span>下单时间:</span>
      <a-range-picker
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        valueFormat="YYYY-MM-DD HH:mm"
        :placeholder="['开始时间', '结束时间']"
        v-model="queryTime"
        @change="changeTime"
      />
    </div>
    <div class="searchItem">
      <span>订单类型:</span>
      <a-select v-model="queryParam.order_type" style="width: 150px">
        <a-select-option value="-1">全部</a-select-option>
        <a-select-option value="0">普通订单</a-select-option>
        <a-select-option value="1">酒店预约</a-select-option>
        <a-select-option value="2">服务预约</a-select-option>
        <a-select-option value="3">点餐订单</a-select-option>
      </a-select>
    </div>
    <div class="searchItem">
      <span>来源平台:</span>
      <a-select v-model="queryParam.platform" style="width: 150px">
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="0">微信小程序</a-select-option>
        <a-select-option value="2">微信公众号</a-select-option>
      </a-select>
    </div>
    <div class="searchItem">
        <a-button style="margin-right: 8px" @click="reset">重置</a-button>
        <a-button type="primary" @click="search">查询</a-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParam: {
        // 订单号
        order_no: '',
        // 商品名称
        goods_name: '',
        // 手机号
        mobile: '',
        // 下单开始时间
        dateStart: '',
        // 下单结束时间
        dateEnd: '',
        // 订单类型
        order_type: '',
        // 来源平台
        platform: '',
      },
      queryTime: [],
    }
  },
  methods: {
    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.dateStart = e[0]
        this.queryParam.dateEnd = e[1]
      } else {
        this.queryParam.dateStart = ''
        this.queryParam.dateEnd = ''
      }
    },
    // 点击重置参数
    reset() {
        this.queryParam.order_no = ''
        this.queryParam.goods_name = ''
        this.queryParam.mobile = ''
        this.queryParam.dateStart = ''
        this.queryParam.dateEnd = ''
        this.queryParam.order_type = ''
        this.queryParam.platform = ''
        this.queryTime = []
    },
    // 点击查询
    search() {
        this.$emit('search',this.queryParam)
    }
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 12px;
  align-items: center;
  .searchItem {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    margin-right: 20px;
    span {
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}
</style>